<template>
  <div class="card-cell">
    <img v-if="icon" :src="iconUrl" class="card-cell-icon" />
    <div v-if="label" class="cell-title">
      <span>{{ label }}</span>
    </div>
    <div class="cell-content">
      <slot> </slot>
    </div>
  </div>
</template>

<script setup name="CardCell">
  const props = defineProps({
    label: String,
    icon: {
      type: String,
      default: '',
    },
  })

  // icon从assets/revenue中获取,需要根据传入的icon名称动态获取对应的图片
  const iconUrl = new URL(`/src/assets/revenue/${props.icon}.png`, import.meta.url).href
</script>

<style lang="less" scoped>
  .card-cell {
    display: flex;
    box-sizing: border-box;
    flex-wrap: wrap;
    align-items: center;

    .card-cell-icon {
      width: 22px;
      height: 22px;
      margin-right: 8px;
    }
    .cell-title {
      font-weight: 600;
      font-size: 16px;
      color: #1d2129;
      line-height: 22px;
      margin-right: 24px;
    }

    .card-content {
      flex: 1;
      flex-shrink: 0;
    }

    & + & {
      margin-top: 2px;
    }
  }
</style>
